<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Form Layout - FLATY Admin</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <!--base css styles-->
        <link rel="stylesheet" href="assets/bootstrap/bootstrap.min.css">
        <link rel="stylesheet" href="assets/bootstrap/bootstrap-responsive.min.css">
        <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="assets/normalize/normalize.css">

        <!--page specific css styles-->

        <!--flaty css styles-->
        <link rel="stylesheet" href="css/flaty.css">
        <link rel="stylesheet" href="css/flaty-responsive.css">

        <link rel="shortcut icon" href="img/favicon.html">

        <script src="assets/modernizr/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <!-- BEGIN Theme Setting -->
        <div id="theme-setting">
            <a href="#"><i class="icon-gears icon-2x"></i></a>
            <ul>
                <li>
                    <span>Skin</span>
                    <ul class="colors" data-target="body" data-prefix="skin-">
                        <li class="active"><a class="blue" href="#"></a></li>
                        <li><a class="red" href="#"></a></li>
                        <li><a class="green" href="#"></a></li>
                        <li><a class="orange" href="#"></a></li>
                        <li><a class="yellow" href="#"></a></li>
                        <li><a class="pink" href="#"></a></li>
                        <li><a class="magenta" href="#"></a></li>
                        <li><a class="gray" href="#"></a></li>
                        <li><a class="black" href="#"></a></li>
                    </ul>
                </li>
                <li>
                    <span>Navbar</span>
                    <ul class="colors" data-target="#navbar" data-prefix="navbar-">
                        <li class="active"><a class="blue" href="#"></a></li>
                        <li><a class="red" href="#"></a></li>
                        <li><a class="green" href="#"></a></li>
                        <li><a class="orange" href="#"></a></li>
                        <li><a class="yellow" href="#"></a></li>
                        <li><a class="pink" href="#"></a></li>
                        <li><a class="magenta" href="#"></a></li>
                        <li><a class="gray" href="#"></a></li>
                        <li><a class="black" href="#"></a></li>
                    </ul>
                </li>
                <li>
                    <span>Sidebar</span>
                    <ul class="colors" data-target="#main-container" data-prefix="sidebar-">
                        <li class="active"><a class="blue" href="#"></a></li>
                        <li><a class="red" href="#"></a></li>
                        <li><a class="green" href="#"></a></li>
                        <li><a class="orange" href="#"></a></li>
                        <li><a class="yellow" href="#"></a></li>
                        <li><a class="pink" href="#"></a></li>
                        <li><a class="magenta" href="#"></a></li>
                        <li><a class="gray" href="#"></a></li>
                        <li><a class="black" href="#"></a></li>
                    </ul>
                </li>
                <li>
                    <span></span>
                    <a data-target="navbar" href="#"><i class="icon-check-empty"></i> Fixed Navbar</a>
                    <a class="pull-right visible-desktop" data-target="sidebar" href="#"><i class="icon-check-empty"></i> Fixed Sidebar</a>
                </li>
            </ul>
        </div>
        <!-- END Theme Setting -->

        <!-- BEGIN Navbar -->
        <div id="navbar" class="navbar">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <!-- BEGIN Brand -->
                    <a href="#" class="brand">
                        <small>
                            <i class="icon-desktop"></i>
                            FLATY Admin
                        </small>
                    </a>
                    <!-- END Brand -->

                    <!-- BEGIN Responsive Sidebar Collapse -->
                    <a href="#" class="btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
                        <i class="icon-reorder"></i>
                    </a>
                    <!-- END Responsive Sidebar Collapse -->

                    <!-- BEGIN Navbar Buttons -->
                    <ul class="nav flaty-nav pull-right">
                        <!-- BEGIN Button Tasks -->
                        <li class="hidden-phone">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <i class="icon-tasks"></i>
                                <span class="badge badge-warning">4</span>
                            </a>

                            <!-- BEGIN Tasks Dropdown -->
                            <ul class="pull-right dropdown-navbar dropdown-menu">
                                <li class="nav-header">
                                    <i class="icon-ok"></i>
                                    4 Tasks to complete
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
                                            <span class="pull-left">Software Update</span>
                                            <span class="pull-right">75%</span>
                                        </div>

                                        <div class="progress progress-mini progress-warning">
                                            <div style="width:75%" class="bar"></div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
                                            <span class="pull-left">Transfer To New Server</span>
                                            <span class="pull-right">45%</span>
                                        </div>

                                        <div class="progress progress-mini progress-danger">
                                            <div style="width:45%" class="bar"></div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
                                            <span class="pull-left">Bug Fixes</span>
                                            <span class="pull-right">20%</span>
                                        </div>

                                        <div class="progress progress-mini">
                                            <div style="width:20%" class="bar"></div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
                                            <span class="pull-left">Writing Documentation</span>
                                            <span class="pull-right">85%</span>
                                        </div>

                                        <div class="progress progress-mini progress-success progress-striped active">
                                            <div style="width:85%" class="bar"></div>
                                        </div>
                                    </a>
                                </li>

                                <li class="more">
                                    <a href="#">See tasks with details</a>
                                </li>
                            </ul>
                            <!-- END Tasks Dropdown -->
                        </li>
                        <!-- END Button Tasks -->

                        <!-- BEGIN Button Notifications -->
                        <li class="hidden-phone">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <i class="icon-bell-alt"></i>
                                <span class="badge badge-important">5</span>
                            </a>

                            <!-- BEGIN Notifications Dropdown -->
                            <ul class="dropdown-navbar dropdown-menu">
                                <li class="nav-header">
                                    <i class="icon-warning-sign"></i>
                                    5 Notifications
                                </li>

                                <li class="notify">
                                    <a href="#">
                                        <i class="icon-comment orange"></i>
                                        <p>New Comments</p>
                                        <span class="badge badge-warning">4</span>
                                    </a>
                                </li>

                                <li class="notify">
                                    <a href="#">
                                        <i class="icon-twitter blue"></i>
                                        <p>New Twitter followers</p>
                                        <span class="badge badge-info">7</span>
                                    </a>
                                </li>

                                <li class="notify">
                                    <a href="#">
                                        <img src="img/demo/avatar/avatar2.jpg" alt="Alex" />
                                        <p>David would like to become moderator.</p>
                                    </a>
                                </li>

                                <li class="notify">
                                    <a href="#">
                                        <i class="icon-bug pink"></i>
                                        <p>New bug in program!</p>
                                    </a>
                                </li>

                                <li class="notify">
                                    <a href="#">
                                        <i class="icon-shopping-cart green"></i>
                                        <p>You have some new orders</p>
                                        <span class="badge badge-success">+10</span>
                                    </a>
                                </li>

                                <li class="more">
                                    <a href="#">See all notifications</a>
                                </li>
                            </ul>
                            <!-- END Notifications Dropdown -->
                        </li>
                        <!-- END Button Notifications -->

                        <!-- BEGIN Button Messages -->
                        <li class="hidden-phone">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <i class="icon-envelope"></i>
                                <span class="badge badge-success">3</span>
                            </a>

                            <!-- BEGIN Messages Dropdown -->
                            <ul class="dropdown-navbar dropdown-menu">
                                <li class="nav-header">
                                    <i class="icon-comments"></i>
                                    3 Messages
                                </li>

                                <li class="msg">
                                    <a href="#">
                                        <img src="img/demo/avatar/avatar3.jpg" alt="Sarah's Avatar" />
                                        <div>
                                            <span class="msg-title">Sarah</span>
                                            <span class="msg-time">
                                                <i class="icon-time"></i>
                                                <span>a moment ago</span>
                                            </span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                    </a>
                                </li>

                                <li class="msg">
                                    <a href="#">
                                        <img src="img/demo/avatar/avatar4.jpg" alt="Emma's Avatar" />
                                        <div>
                                            <span class="msg-title">Emma</span>
                                            <span class="msg-time">
                                                <i class="icon-time"></i>
                                                <span>2 Days ago</span>
                                            </span>
                                        </div>
                                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ...</p>
                                    </a>
                                </li>

                                <li class="msg">
                                    <a href="#">
                                        <img src="img/demo/avatar/avatar5.jpg" alt="John's Avatar" />
                                        <div>
                                            <span class="msg-title">John</span>
                                            <span class="msg-time">
                                                <i class="icon-time"></i>
                                                <span>8:24 PM</span>
                                            </span>
                                        </div>
                                        <p>Duis aute irure dolor in reprehenderit in ...</p>
                                    </a>
                                </li>

                                <li class="more">
                                    <a href="#">See all messages</a>
                                </li>
                            </ul>
                            <!-- END Notifications Dropdown -->
                        </li>
                        <!-- END Button Messages -->

                        <!-- BEGIN Button User -->
                        <li class="user-profile">
                            <a data-toggle="dropdown" href="#" class="user-menu dropdown-toggle">
                                <img class="nav-user-photo" src="img/demo/avatar/avatar1.jpg" alt="Penny's Photo" />
                                <span class="hidden-phone" id="user_info">
                                    Penny
                                </span>
                                <i class="icon-caret-down"></i>
                            </a>

                            <!-- BEGIN User Dropdown -->
                            <ul class="dropdown-menu dropdown-navbar" id="user_menu">
                                <li class="nav-header">
                                    <i class="icon-time"></i>
                                    Logined From 20:45
                                </li>

                                <li>
                                    <a href="#">
                                        <i class="icon-cog"></i>
                                        Account Settings
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <i class="icon-user"></i>
                                        Edit Profile
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <i class="icon-question"></i>
                                        Help
                                    </a>
                                </li>

                                <li class="divider visible-phone"></li>

                                <li class="visible-phone">
                                    <a href="#">
                                        <i class="icon-tasks"></i>
                                        Tasks
                                        <span class="badge badge-warning">4</span>
                                    </a>
                                </li>
                                <li class="visible-phone">
                                    <a href="#">
                                        <i class="icon-bell-alt"></i>
                                        Notifications
                                        <span class="badge badge-important">8</span>
                                    </a>
                                </li>
                                <li class="visible-phone">
                                    <a href="#">
                                        <i class="icon-envelope"></i>
                                        Messages
                                        <span class="badge badge-success">5</span>
                                    </a>
                                </li>

                                <li class="divider"></li>

                                <li>
                                    <a href="#">
                                        <i class="icon-off"></i>
                                        Logout
                                    </a>
                                </li>
                            </ul>
                            <!-- BEGIN User Dropdown -->
                        </li>
                        <!-- END Button User -->
                    </ul>
                    <!-- END Navbar Buttons -->
                </div><!--/.container-fluid-->
            </div><!--/.navbar-inner-->
        </div>
        <!-- END Navbar -->

        <!-- BEGIN Container -->
        <div class="container-fluid" id="main-container">
            <!-- BEGIN Sidebar -->
            <div id="sidebar" class="nav-collapse">
                <!-- BEGIN Navlist -->
                <ul class="nav nav-list">
                    <!-- BEGIN Search Form -->
                    <li>
                        <form target="#" method="GET" class="search-form">
                            <span class="search-pan">
                                <button type="submit">
                                    <i class="icon-search"></i>
                                </button>
                                <input type="text" name="search" placeholder="Search ..." autocomplete="off" />
                            </span>
                        </form>
                    </li>
                    <!-- END Search Form -->
                    <li>
                        <a href="index.html">
                            <i class="icon-dashboard"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>

                    <li>
                        <a href="typography.html">
                            <i class="icon-text-width"></i>
                            <span>Typography</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="icon-desktop"></i>
                            <span>UI Elements</span>
                            <b class="arrow icon-angle-right"></b>
                        </a>

                        <!-- BEGIN Submenu -->
                        <ul class="submenu">
                            <li><a href="ui_general.html">General</a></li>
                            <li><a href="ui_button.html">Button</a></li>
                            <li><a href="ui_slider.html">Slider</a></li>
                            <li><a href="ui_chart.html">Chart</a></li>
                            <li><a href="ui_message.html">Conversation</a></li>
                            <li><a href="ui_icon.html">Icon</a></li>
                        </ul>
                        <!-- END Submenu -->
                    </li>

                    <li class="active">
                        <a href="#" class="dropdown-toggle">
                            <i class="icon-edit"></i>
                            <span>Forms</span>
                            <b class="arrow icon-angle-right"></b>
                        </a>

                        <!-- BEGIN Submenu -->
                        <ul class="submenu">
                            <li class="active"><a href="form_layout.html">Layout</a></li>
                            <li><a href="form_component.html">Component</a></li>
                            <li><a href="form_wizard.html">Wizard</a></li>
                            <li><a href="form_validation.html">Validation</a></li>
                        </ul>
                        <!-- END Submenu -->
                    </li>

                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="icon-list"></i>
                            <span>Tables</span>
                            <b class="arrow icon-angle-right"></b>
                        </a>

                        <!-- BEGIN Submenu -->
                        <ul class="submenu">
                            <li><a href="table_basic.html">Basic</a></li>
                            <li><a href="table_advance.html">Advance</a></li>
                            <li><a href="table_dynamic.html">Dynamic</a></li>
                        </ul>
                        <!-- END Submenu -->
                    </li>

                    <li>
                        <a href="box.html">
                            <i class="icon-list-alt"></i>
                            <span>Box</span>
                        </a>
                    </li>

                    <li>
                        <a href="calendar.html">
                            <i class="icon-calendar"></i>
                            <span>Calendar</span>
                        </a>
                    </li>

                    <li>
                        <a href="gallery.html">
                            <i class="icon-picture"></i>
                            <span>Gallery</span>
                        </a>
                    </li>

                    <li>
                        <a href="grid.html">
                            <i class="icon-th"></i>
                            <span>Griding System</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="icon-file"></i>
                            <span>Other Pages</span>
                            <b class="arrow icon-angle-right"></b>
                        </a>

                        <!-- BEGIN Submenu -->
                        <ul class="submenu">
                            <li><a href="more_login.html">Login &amp; Register</a></li>
                            <li><a href="more_error-404.html">Error 404</a></li>
                            <li><a href="more_error-500.html">Error 500</a></li>
                            <li><a href="more_blank.html">Blank Page</a></li>
                            <li><a href="more_set-skin.html">Skin</a></li>
                            <li><a href="more_set-sidebar-navbar-color.html">Sidebar &amp; Navbar</a></li>
                            <li><a href="more_sidebar-collapsed.html">Collapsed Sidebar</a></li>
                        </ul>
                        <!-- END Submenu -->
                    </li>
                </ul>
                <!-- END Navlist -->

                <!-- BEGIN Sidebar Collapse Button -->
                <div id="sidebar-collapse" class="visible-desktop">
                    <i class="icon-double-angle-left"></i>
                </div>
                <!-- END Sidebar Collapse Button -->
            </div>
            <!-- END Sidebar -->

            <!-- BEGIN Content -->
            <div id="main-content">
                <!-- BEGIN Page Title -->
                <div class="page-title">
                    <div>
                        <h1><i class="icon-file-alt"></i> Form Layout</h1>
                        <h4>Simple form element, griding and layout</h4>
                    </div>
                </div>
                <!-- END Page Title -->

                <!-- BEGIN Breadcrumb -->
                <div id="breadcrumbs">
                    <ul class="breadcrumb">
                        <li>
                            <i class="icon-home"></i>
                            <a href="index.html">Home</a>
                            <span class="divider"><i class="icon-angle-right"></i></span>
                        </li>
                        <li class="active">Form Layout</li>
                    </ul>
                </div>
                <!-- END Breadcrumb -->

                <!-- BEGIN Main Content -->
                <div class="row-fluid">
                    <div class="span12">
                        <div class="box">
                            <div class="box-title">
                                <h3><i class="icon-reorder"></i> Simple Form</h3>
                                <div class="box-tool">
                                    <a data-action="collapse" href="#"><i class="icon-chevron-up"></i></a>
                                    <a data-action="close" href="#"><i class="icon-remove"></i></a>
                                </div>
                            </div>
                            <div class="box-content">
                                 <form action="#" class="form-horizontal">
                                    <div class="control-group">
                                       <label class="control-label">Mini Input</label>
                                       <div class="controls">
                                          <input type="text" placeholder="mini" class="input-mini" />
                                          <span class="help-inline">Some hint here</span>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">Small Input</label>
                                       <div class="controls">
                                          <input type="text" placeholder="small" class="input-small" />
                                          <span class="help-inline">Some hint here</span>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">Meduam Input</label>
                                       <div class="controls">
                                          <input type="text" placeholder="medium" class="input-medium" />
                                          <span class="help-inline">Some hint here</span>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">Large Input</label>
                                       <div class="controls">
                                          <input type="text" placeholder="large" class="input-large" />
                                          <span class="help-inline">Some hint here</span>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">xLarge Input</label>
                                       <div class="controls">
                                          <input type="text" placeholder="xlarge" class="input-xlarge" />
                                          <span class="help-inline">Some hint here</span>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">xxLarge Input</label>
                                       <div class="controls">
                                          <input type="text" placeholder="xxlarge" class="input-xxlarge" />
                                          <span class="help-inline">Some hint here</span>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">Block Level Input</label>
                                       <div class="controls">
                                          <input type="text" placeholder="block level" class="input-block-level" />
                                          <span class="help-inline">Some hint here</span>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">Disabled Input</label>
                                       <div class="controls">   
                                          <input class="input-medium" type="text" placeholder="Disabled input here..." disabled />
                                          <span class="help-inline">Some hint here</span>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">Readonly Input</label>
                                       <div class="controls">   
                                          <input class="input-medium" readonly type="text" placeholder="Readonly input here..." disabled />
                                          <span class="help-inline">Some hint here</span>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">Small Dropdown</label>
                                       <div class="controls">
                                          <select class="input-small" tabindex="1">
                                             <option value="Category 1">Category 1</option>
                                             <option value="Category 2">Category 2</option>
                                             <option value="Category 3">Category 5</option>
                                             <option value="Category 4">Category 4</option>
                                          </select>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">Medium Dropdown</label>
                                       <div class="controls">
                                          <select class="input-medium" tabindex="1">
                                             <option value="Category 1">Category 1</option>
                                             <option value="Category 2">Category 2</option>
                                             <option value="Category 3">Category 5</option>
                                             <option value="Category 4">Category 4</option>
                                          </select>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">Large Dropdown</label>
                                       <div class="controls">
                                          <select class="input-large" tabindex="1">
                                             <option value="Category 1">Category 1</option>
                                             <option value="Category 2">Category 2</option>
                                             <option value="Category 3">Category 5</option>
                                             <option value="Category 4">Category 4</option>
                                          </select>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">xLarge Dropdown</label>
                                       <div class="controls">
                                          <select class="input-xlarge" tabindex="1">
                                             <option value="Category 1">Category 1</option>
                                             <option value="Category 2">Category 2</option>
                                             <option value="Category 3">Category 5</option>
                                             <option value="Category 4">Category 4</option>
                                          </select>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">xxLarge Dropdown</label>
                                       <div class="controls">
                                          <select class="input-xxlarge" tabindex="1">
                                             <option value="Category 1">Category 1</option>
                                             <option value="Category 2">Category 2</option>
                                             <option value="Category 3">Category 5</option>
                                             <option value="Category 4">Category 4</option>
                                          </select>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">Block Level Dropdown</label>
                                       <div class="controls">
                                          <select class="input-block-level" tabindex="1">
                                             <option value="Category 1">Category 1</option>
                                             <option value="Category 2">Category 2</option>
                                             <option value="Category 3">Category 5</option>
                                             <option value="Category 4">Category 4</option>
                                          </select>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">Radio Buttons</label>
                                       <div class="controls">
                                          <label class="radio">
                                              <input type="radio" name="optionsRadios1" value="option1" /> Option 1
                                          </label>
                                          <label class="radio">
                                              <input type="radio" name="optionsRadios1" value="option2" checked /> Option 2
                                          </label>  
                                          <label class="radio">
                                              <input type="radio" name="optionsRadios1" value="option2" /> Option 3
                                          </label>  
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">Inline Radio Buttons</label>
                                       <div class="controls">
                                          <label class="radio inline">
                                              <input type="radio" name="optionsRadios2" value="option1" /> Option 1
                                          </label>
                                          <label class="radio inline">
                                              <input type="radio" name="optionsRadios2" value="option2" checked /> Option 2
                                          </label>  
                                          <label class="radio inline">
                                              <input type="radio" name="optionsRadios2" value="option2" /> Option 3
                                          </label>  
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">Checkbox</label>
                                       <div class="controls">
                                          <label class="checkbox">
                                            <input type="checkbox" value="" /> Checkbox 1
                                          </label>
                                          <label class="checkbox">
                                            <input type="checkbox" value="" /> Checkbox 2
                                          </label>
                                          <label class="checkbox">
                                            <input type="checkbox" value="" /> Checkbox 3
                                          </label>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">Inline Checkbox</label>
                                       <div class="controls">
                                          <label class="checkbox inline">
                                            <input type="checkbox" value="" /> Checkbox 1
                                          </label>
                                          <label class="checkbox inline">
                                            <input type="checkbox" value="" /> Checkbox 2
                                          </label>
                                          <label class="checkbox inline">
                                            <input type="checkbox" value="" /> Checkbox 3
                                          </label>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">Textarea</label>
                                       <div class="controls">
                                          <textarea class="input-medium" rows="3"></textarea>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">Large Textarea</label>
                                       <div class="controls">
                                          <textarea class="input-large" rows="3"></textarea>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">xLarge Textarea</label>
                                       <div class="controls">
                                          <textarea class="input-xlarge" rows="3"></textarea>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">xxLarge Textarea</label>
                                       <div class="controls">
                                          <textarea class="input-xxlarge" rows="3"></textarea>
                                       </div>
                                    </div>
                                    <div class="control-group">
                                       <label class="control-label">Block Level Textarea</label>
                                       <div class="controls">
                                          <textarea class="input-block-level" rows="3"></textarea>
                                       </div>
                                    </div>
                                    <div class="form-actions">
                                       <button type="submit" class="btn btn-primary"><i class="icon-ok"></i> Save</button>
                                       <button type="button" class="btn">Cancel</button>
                                    </div>
                                 </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span12">
                        <div class="box box-magenta">
                            <div class="box-title">
                                <h3><i class="icon-reorder"></i> Grid System</h3>
                                <div class="box-tool">
                                    <a data-action="collapse" href="#"><i class="icon-chevron-up"></i></a>
                                    <a data-action="close" href="#"><i class="icon-remove"></i></a>
                                </div>
                            </div>
                            <div class="box-content">
                                <div class="controls">
                                    <input class="span12" type="text" placeholder=".span12" />
                                 </div>
                                 <div class="controls controls-row">
                                    <input class="span11" type="text" placeholder=".span11" />
                                    <input class="span1" type="text" placeholder=".span1" />
                                 </div>
                                 <div class="controls controls-row">
                                    <input class="span10" type="text" placeholder=".span10" />
                                    <input class="span2" type="text" placeholder=".span2" />
                                 </div>
                                 <div class="controls controls-row">
                                    <input class="span9" type="text" placeholder=".span9" />
                                    <input class="span3" type="text" placeholder=".span3" />
                                 </div>
                                 <div class="controls controls-row">
                                    <input class="span8" type="text" placeholder=".span8" />
                                    <input class="span4" type="text" placeholder=".span4" />
                                 </div>
                                 <div class="controls controls-row">
                                    <input class="span7" type="text" placeholder=".span7" />
                                    <input class="span5" type="text" placeholder=".span5" />
                                 </div>
                                 <div class="controls controls-row">
                                    <input class="span6" type="text" placeholder=".span6" />
                                    <input class="span6" type="text" placeholder=".span6" />
                                 </div>
                                 <div class="controls controls-row">
                                    <input class="span5" type="text" placeholder=".span5" />
                                    <input class="span7" type="text" placeholder=".span7" />
                                 </div>
                                 <div class="controls controls-row">
                                    <input class="span4" type="text" placeholder=".span4" />
                                    <input class="span8" type="text" placeholder=".span8" />
                                 </div>
                                 <div class="controls controls-row">
                                    <input class="span3" type="text" placeholder=".span3" />
                                    <input class="span9" type="text" placeholder=".span9" />
                                 </div>
                                 <div class="controls controls-row">
                                    <input class="span2" type="text" placeholder=".span2" />
                                    <input class="span10" type="text" placeholder=".span10" />
                                 </div>
                                 <div class="controls controls-row">
                                    <input class="span1" type="text" placeholder=".span1" />
                                    <input class="span11" type="text" placeholder=".span11" />
                                 </div>
                                 <div class="controls controls-row">
                                    <input class="span2" type="text" placeholder=".span2" />
                                    <input class="span3" type="text" placeholder=".span3" />
                                    <input class="span4" type="text" placeholder=".span4" />
                                    <input class="span2" type="text" placeholder=".span2" />
                                    <input class="span1" type="text" placeholder=".span1" />
                                 </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span12">
                        <div class="box box-green">
                            <div class="box-title">
                                <h3><i class="icon-reorder"></i> Tow Column Form</h3>
                                <div class="box-tool">
                                    <a data-action="collapse" href="#"><i class="icon-chevron-up"></i></a>
                                    <a data-action="close" href="#"><i class="icon-remove"></i></a>
                                </div>
                            </div>
                            <div class="box-content">
                                <form action="#" class="form-horizontal">
                                    <div class="row-fluid">
                                       <div class="span6 ">
                                          <!-- BEGIN Left Side -->
                                            <div class="control-group">
                                                <label for="textfield1" class="control-label">Text input</label>
                                                <div class="controls">
                                                    <input type="text" name="textfield1" id="textfield1" placeholder="Text input" class="input-xlarge">
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label for="password1" class="control-label">Password</label>
                                                <div class="controls">
                                                    <input type="password" name="password1" id="password1" placeholder="Password input" class="input-xlarge">
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label">Checkboxes</label>
                                                <div class="controls">
                                                    <label class='checkbox'>
                                                        <input type="checkbox" name="checkbox"> Checkbox 1
                                                    </label>
                                                    <label class='checkbox'>
                                                        <input type="checkbox" name="checkbox"> Checkbox 2
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label for="textarea1" class="control-label">Textarea</label>
                                                <div class="controls">
                                                    <textarea name="textarea1" id="textarea1" rows="5" class="input-block-level"></textarea>
                                                </div>
                                            </div>
                                          <!-- END Left Side -->
                                       </div>
                                       <div class="span6 ">
                                          <!-- BEGIN Right Side -->
                                            <div class="control-group">
                                                <label for="textfield2" class="control-label">Text input</label>
                                                <div class="controls">
                                                    <input type="text" name="textfield2" id="textfield2" placeholder="Text input" class="input-xlarge">
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label for="password2" class="control-label">Password</label>
                                                <div class="controls">
                                                    <input type="password" name="password2" id="password2" placeholder="Password input" class="input-xlarge">
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label class="control-label">Checkboxes</label>
                                                <div class="controls">
                                                    <label class='checkbox'>
                                                        <input type="checkbox" name="checkbox"> Checkbox 1
                                                    </label>
                                                    <label class='checkbox'>
                                                        <input type="checkbox" name="checkbox"> Checkbox 2
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label for="textarea2" class="control-label">Textarea</label>
                                                <div class="controls">
                                                    <textarea name="textarea2" id="textarea2" rows="5" class="input-block-level"></textarea>
                                                </div>
                                            </div>
                                          <!-- END Right Side -->
                                       </div>
                                    </div>

                                    <div class="form-actions">
                                       <button type="submit" class="btn btn-primary"><i class="icon-ok"></i> Save</button>
                                       <button type="button" class="btn">Cancel</button>
                                    </div>
                                 </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span12">
                        <div class="box box-red">
                            <div class="box-title">
                                <h3><i class="icon-reorder"></i> Row Separated Form</h3>
                                <div class="box-tool">
                                    <a data-action="collapse" href="#"><i class="icon-chevron-up"></i></a>
                                    <a data-action="close" href="#"><i class="icon-remove"></i></a>
                                </div>
                            </div>
                            <div class="box-content">
                                <form action="#" class="form-horizontal form-row-separated">
                                    <div class="control-group">
                                        <label for="textfield3" class="control-label">Text input</label>
                                        <div class="controls">
                                            <input type="text" name="textfield3" id="textfield3" placeholder="Text input" class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="password3" class="control-label">Password</label>
                                        <div class="controls">
                                            <input type="password" name="password3" id="password3" placeholder="Password input" class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label">Checkboxes</label>
                                        <div class="controls">
                                            <label class='checkbox'>
                                                <input type="checkbox" name="checkbox"> Checkbox 1
                                            </label>
                                            <label class='checkbox'>
                                                <input type="checkbox" name="checkbox"> Checkbox 2
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group last">
                                        <label for="textarea3" class="control-label">Textarea</label>
                                        <div class="controls">
                                            <textarea name="textarea3" id="textarea3" rows="5" class="input-block-level"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-actions">
                                       <button type="submit" class="btn btn-primary"><i class="icon-ok"></i> Save</button>
                                       <button type="button" class="btn">Cancel</button>
                                    </div>
                                 </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span12">
                        <div class="box box-black">
                            <div class="box-title">
                                <h3><i class="icon-reorder"></i> Bordered Form</h3>
                                <div class="box-tool">
                                    <a data-action="collapse" href="#"><i class="icon-chevron-up"></i></a>
                                    <a data-action="close" href="#"><i class="icon-remove"></i></a>
                                </div>
                            </div>
                            <div class="box-content">
                                <form action="#" class="form-horizontal form-bordered">
                                    <div class="control-group">
                                        <label for="textfield4" class="control-label">Text input</label>
                                        <div class="controls">
                                            <input type="text" name="textfield4" id="textfield4" placeholder="Text input" class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="password4" class="control-label">Password</label>
                                        <div class="controls">
                                            <input type="password" name="password4" id="password4" placeholder="Password input" class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label">Checkboxes</label>
                                        <div class="controls">
                                            <label class='checkbox'>
                                                <input type="checkbox" name="checkbox"> Checkbox 1
                                            </label>
                                            <label class='checkbox'>
                                                <input type="checkbox" name="checkbox"> Checkbox 2
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group last">
                                        <label for="textarea4" class="control-label">Textarea</label>
                                        <div class="controls">
                                            <textarea name="textarea4" id="textarea4" rows="5" class="input-block-level"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-actions">
                                       <button type="submit" class="btn btn-primary"><i class="icon-ok"></i> Save</button>
                                       <button type="button" class="btn">Cancel</button>
                                    </div>
                                 </form>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span12">
                        <div class="box box-pink">
                            <div class="box-title">
                                <h3><i class="icon-reorder"></i> Row Separated & Striped Form</h3>
                                <div class="box-tool">
                                    <a data-action="collapse" href="#"><i class="icon-chevron-up"></i></a>
                                    <a data-action="close" href="#"><i class="icon-remove"></i></a>
                                </div>
                            </div>
                            <div class="box-content">
                                <form action="#" class="form-horizontal form-bordered form-row-stripped">
                                    <div class="control-group">
                                        <label for="textfield5" class="control-label">Text input</label>
                                        <div class="controls">
                                            <input type="text" name="textfield5" id="textfield5" placeholder="Text input" class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label for="password5" class="control-label">Password</label>
                                        <div class="controls">
                                            <input type="password" name="password5" id="password5" placeholder="Password input" class="input-xlarge">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label">Checkboxes</label>
                                        <div class="controls">
                                            <label class='checkbox'>
                                                <input type="checkbox" name="checkbox"> Checkbox 1
                                            </label>
                                            <label class='checkbox'>
                                                <input type="checkbox" name="checkbox"> Checkbox 2
                                            </label>
                                        </div>
                                    </div>
                                    <div class="control-group last">
                                        <label for="textarea5" class="control-label">Textarea</label>
                                        <div class="controls">
                                            <textarea name="textarea5" id="textarea5" rows="5" class="input-block-level"></textarea>
                                        </div>
                                    </div>
                                    <div class="form-actions">
                                       <button type="submit" class="btn btn-primary"><i class="icon-ok"></i> Save</button>
                                       <button type="button" class="btn">Cancel</button>
                                    </div>
                                 </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END Main Content -->
                
                <footer>
                    <p>2013 © FLATY Admin Template.</p>
                </footer>

                <a id="btn-scrollup" class="btn btn-circle btn-large" href="#"><i class="icon-chevron-up"></i></a>
            </div>
            <!-- END Content -->
        </div>
        <!-- END Container -->


        <!--basic scripts-->
        <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>-->
        <script>window.jQuery || document.write('<script src="assets/jquery/jquery-1.10.1.min.js"><\/script>')</script>
        <script src="assets/bootstrap/bootstrap.min.js"></script>
        <script src="assets/nicescroll/jquery.nicescroll.min.js"></script>

        <!--page specific plugin scripts-->

        <!--flaty scripts-->
        <script src="js/flaty.js"></script>

    </body>
</html>
